<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="发生时间:">
        <el-date-picker
          v-model="startDt"
          type="date"
          placeholder="选择日期"
        />
        <span>至</span>
        <el-date-picker
          v-model="endDt"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
    </el-form>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="column"
      :data="tableData.data"
      height="60vh"
      pagination
      :total="tableData.total"
      @fetch="getData"
    />
  </div>
</template>

<script>
  import { colorObjMap } from '@/utils/map'
  import moment from 'dayjs'
  import { parseTime } from '@/utils'
  import { customerScoreRecord, queryMap } from '@/api'

  export default {
    name: 'tab-score',
    props: ['csmId'],
    data() {
      return {
        startDt: moment(new Date()).format('YYYY-01-01'),
        endDt: '',
        statusMap: [{ value: 1, desc: '购买', 'key': 'GET' }, { value: 2, desc: '兑换', 'key': 'EXCHANGE_MINUS' }, { value: 3, desc: '获赠', 'key': 'MERGE_GET' }, { value: 4, desc: '赠出', 'key': 'MERGE_MINUS' }, { value: 5, desc: '冲正(+)', 'key': 'CORRECT_ADD' }, { value: 6, desc: '冲正(-)', 'key': 'CORRECT_MINUS' }, { value: 7, desc: '退货', 'key': 'RECYCLE_MINUS' }, { value: 8, desc: '退货', 'key': 'RECYCLE_ADD' }, { value: 9, desc: '订单退单', 'key': 'GIVEUP_BILL_ADD' }, { value: 10, desc: '作废订单', 'key': 'CANCEL_BILL_ADD' }, { value: 11, desc: '取消订单', 'key': 'STOP_BILL_ADD' }],
        tableData: {
          data: []
        }
      }
    },
    computed: {
      column: function() {
        return [
          { label: '订单号', prop: 'orderCode', width: 100, align: 'center' },
          { label: '商品描述', prop: 'remark', width: '', align: 'left' },
          { label: '发生时间', prop: 'createTime', width: 180, align: 'center',
            render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
          },
          { label: '应收金额', prop: 'treceivables', width: 80, align: 'right', hidden: false },
          { label: '实收金额', prop: 'taccReceivable', width: 80, align: 'right', hidden: false },
          { label: '积分类型', prop: 'dtype', width: 100, align: 'center',
            // render: (h, { row }) => <span>{ row.dtype && formatColumnMap(this.statusMap, 'value', row.dtype, 'desc') }</span>
            render: (h, { row }) => {
              const obj = {
                1: '购买',
                2: '兑换',
                3: '获赠',
                4: '赠出',
                5: '冲正(+)',
                6: '冲正(-)',
                7: '退货',
                8: '订单退单',
                9: '作废订单',
                10: '取消订单'
              }
              return <span>{ row.dtype && obj[row.dtype]}</span>
            }
          },
          { label: '积分', prop: 'score', width: 100, align: 'center',
            render: (h, { row }) => <span style={colorObjMap[row.dtype]}>{ row.score }</span>
          }
        ]
      }
    },
    async created() {
      const res = await queryMap({ enumName: 'OrderFlag' })
      this.statusMap = res.data
    },
    methods: {
      async getData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          csmId: String(this.csmId),
          'startDt': this.startDt,
          'endDt': this.endDt
        }
        const res = await customerScoreRecord(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style scoped>

</style>
